import React from 'react';
import {BrowserRouter,Route,Link,Switch,Redirect} from 'react-router-dom';
// import MyRoute from './my_route_dom/index';
import Home from './pages/Home';
// import About from './pages/About';
// import Goods from './pages/Goods';
// import Custom from './pages/Custom';
import './index.css';
import List from './compontent/List';
import Shoppingcar from './compontent/Shoppingcar';
// function Always(props){
//   return(
//     <div>
//       Always
//     </div>
//   )
// }
function NotFound(props){
  return(
    <div>
      404 Not Found
    </div>
  )
}


class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div>
        <BrowserRouter>
          <ul style={{position:"relative"}}>
            {/* <li><Link to='/home'>首页</Link></li>
     
        
            <li><Link to='/about'>关于</Link></li> */}
         
        
            <li className='list'><Link to='/list'>产品</Link></li>
            
          </ul>
            {/* 通过Switch组件匹配一个路由对象*/}
          <Switch>
            {/*Redirect重定向组件，当访问 / 目录时自动跳转到 /home exact表示精确匹配*/}
            <Redirect exact from='/' to='/home'/>
            <Route path='/home' component={Home}/>
            <Route path='/list' component={List}/>
            <Route path='/shoppingcar' component={Shoppingcar}/>
           
            {/* <Route path='/about' component={About}/>
            <Route path='/goods' component={Goods}/> */}
            {/* <Route path='/goods/:g_id' component={Fruit}/> */}
            <Route component={NotFound}/>
          </Switch>
          {/*总会匹配一个Always组件，因为没有匹配路径 */}
          {/* <Route component={Always}/> */}
          {/* <MyRoute path='/myroute/:id/:type' component={Custom}/> */}
        </BrowserRouter>
      </div>
    )
  }
}

export default App;


